#@adminLayout()
#define main()
<!--<style>-->
<!--    [class*="col-"] {-->

<!--        background-color: #eee;-->
<!--        background-color: rgba(86, 61, 124, .15);-->
<!--        border: 1px solid #ddd;-->
<!--        border: 1px solid rgba(86, 61, 124, .2);-->
<!--    }-->
<!--</style>-->
<div class="jbolt_page" data-key="#(pmkey)">
    <div class="jbolt_page_title">
        <div class="row">
            <div class="col-11">
                <h1>特价商品管理</h1>
                <span>#(pageData1.totalRow?? 0) 条记录</span>
                <input type="hidden" id="totalPage" value="#(pageData1.totalPage)"/>
                <input type="hidden" id="pageNumber" value="#(pageData1.pageNumber)"/>
                <form class="form-inline" id="select_commodity_form1" action="/auth/mall/special_commodity"  data-pjaxsubmit  method="get">
                    <input type="hidden" name="commodityTypeId" value="#(commodityTypeId?? 0)"/>
                    <input type="hidden" name="commodityId" value="#(commodityId?? 0)"/>
                    <input type="hidden" name="isDelete" value="#(isDelete?? false)"/>
                    <input type="text" autocomplete="off" id="keyword1" class="form-control"  placeholder="输入关键字搜索" name="keywords1" value="#(keywords1??)" />
                    <select class="form-control ml-1" id="Status1"  data-url="/auth/mall/special_commodity/get_commodity_status"  name="Status1" data-autoload data-text="=是否特价=" data-value="" data-select="#(Status1??)"></select>
                    <select class="form-control ml-1" id="sale1"  data-url="/auth/mall/special_commodity/on_sale"  name="onSale1" data-autoload data-text="=上下架=" data-value="" data-select="#(onSale1??)"></select>
                    <select class="form-control ml-1" id="on_type1"  data-url="/auth/mall/special_commodity/on_select_type"  name="onSelectType1" data-autoload data-text="请选择商家" data-value="" data-select="#(onSelectType1??)"></select>
                    <select class="form-control ml-1" id="on_commodity_type1"  data-url="/auth/mall/special_commodity/on_select_commodity_type"  name="onSelectCommodityType1" data-autoload data-text="请选择顶级类型" data-value="" data-select="#(onSelectCommodityType1??)"></select>

                    <button    onclick="normalData()" class="btn btn-light" ><i class="fa fa-search"></i> 查询</button>
                    <button    onclick="TestOrderreset()" data-handler="reloadCurrentPage" class="btn btn-light" ><i class="fa fa-refresh"></i> 重置</button>

                    <button  type="button" onclick="trashData()" class="btn btn-#((isDelete?? && isDelete=="true")?'danger':'light')" ><i class="fa fa-trash"></i> 回收站(#(deleteCount1?? 0))</button>

                </form>
            </div>
            <div class="col-1">
                <!--                #setLocal(JboltWithTabs=CACHE.getUserJBoltAdminWithTabs(session[SessionKey.ADMIN_USER_ID]))-->
                <a #if(JboltWithTabs) data-tabtrigger #else data-pjax #end  href="/auth/mall/special_commodity/preadd" data-title="添加新商品" class="pull-right btn btn-success mr-1" style="width:70px;" ><i class="fa fa-plus"></i> 添加</a>
            </div>
        </div>
    </div>
    <div class="jbolt_page_content">
        <div class="row ml-0">
            <div style="width:230px">
                <div class="card">
                    <div class="card-header">商品分类(后端)</div>
                    <div class="card-body">
                        <div id="commodity_Tree_commodity_mgr1"></div>
                    </div>
                </div>
            </div>
            <div class="col">
                <table class="table table-bordered table-hover table-striped table-center">
                    <thead>
                    <tr><th style="width: 80px">序号</th><th style="min-width:80px">主图</th><th style="min-width: 100px">商品名</th><th style="min-width:100px">商家</th><th style="min-width:90px">商品类型</th><th style="width:70px">特价库存</th><th style="width:60px">单位</th><th style="width: 90px">原价(元)</th><th style="width: 90px">特价(元)</th><th style="width: 80px">特价折扣</th><th style="width: 80px">平台抽成</th><th style="width: 90px">分销商积分</th><th style="width: 80px">是否特价</th><th style="width: 80px">上下架</th><th style="width: 80px">详情</th><th  style="width: 120px">操作</th></tr>

                    </thead>
                    <tbody>
                    #if(pageData1)
                    #for(data:pageData1.list)
                    <tr>
                        <td> <div    style="width:30px;margin:0px auto;"><span class="text-success">#(for.index+1)  </span></div></td>
                        <td><div  style="width:120px;margin:0px auto;"><img class="j_goodslist_mainimg" style="width: 120px"  data-photobtn tooltip data-title="点击查看大图"  src="#realImage(data.image??,'/assets/img/uploadimg.png')"/>  </div></td>
                        <td><div   style="width:100px;margin:0px auto;text-align: center;"><span class="text-success">#(data.name??) </span></div></td>


                        <td><div    style="width:120px;margin:0px auto;text-align: center;"><span class="text-success">#(data.retailer??)   </span></div></td>
                        <td><div  style="width:80px;margin:0px auto;"><span class="text-success">#(MyUtil.get_commodity_full_name(data.type_id??) )</span></div></td>

                        <td>
                            <div   style="min-width:60px;margin:0px auto;"><span class="text-success">#(data.special_stock?? )</span></div>
                        </td>

                        <td>
                            <div   style="width:40px;margin:0px auto;"><span class="text-success">#(data.unit?? )</span></div>
                        </td>

                        <td>
                            <div   style="min-width:50px;margin:0px auto;"><span class="text-success">#(MyUtil.get_price_string(data.price??) )</span></div>
                        </td>

                        <td>
                            <div   style="min-width:50px;margin:0px auto;"><span class="text-success">#(MyUtil.get_price_string(data.special_price??) )</span></div>
                        </td>
                        <td>
                            <div   style="min-width:60px;margin:0px auto;"><span class="text-success">#(data.discount??)</span></div>
                        </td>
                        <td>
                            <div   style="min-width:60px;margin:0px auto;"><span class="text-success">#(data.platform_commission??)</span></div>
                        </td>
                        <td>
                            <div   style="min-width:60px;margin:0px auto;"><span class="text-success">#(data.spread_credit??)</span></div>
                        </td>


                        <td>
                            <div   style="min-width:60px;margin:0px auto;"><span class="text-success">#(MyUtil.change_special_commodity(data.special_status??) )</span></div>
                        </td>



                        <td>
                            #if(data.onsale_status!=3)
                            <img src="#(data.onsale_status==1?'/assets/img/switch/default/on.png':'/assets/img/switch/default/off.png')" data-switchbtn data-confirm="确认切换商品上下架状态？"  data-handler="onSaleChangeHandler"  data-url="/auth/mall/commodity/toggle_on_sale/#(data.id)"/>
                            #else
                            <div>待上架</div>
                            #end
                        </td>
                        <td>

                            <img src="assets/img/off.png" data-switchbtn  data-handler="toggleVisiable('#summernote_demoHiddenTextContent_#(data.id)')" />

                        </td>


                        <td>
                            #if(data.is_del??)
                            <a  tooltip  title="还原"  href="/auth/mall/special_commodity/restore_commodity/#(data.id)" data-handler="refreshPjaxContainer" data-confirm="确定恢复此商品？(恢复后的商品移出回收站)" class="jbolt_table_delbtn"><i class="fa fa-mail-reply c-danger"></i></a>
                            #else
                            #if(data.onsale_status!=1??)
                            <a  tooltip  title="编辑"  data-height="600" data-title="编辑商品[#(data.id)]"  href="/auth/mall/special_commodity/edit_commodity/#(data.id)"  #if(JboltWithTabs)   data-tabtrigger  #else data-pjax   #end   class="jbolt_table_btn"><i class="fa fa-pencil c-primary"></i></a>
                            <a  tooltip  title="删除"  href="/auth/mall/special_commodity/delete_commodity/#(data.id)" data-handler="refreshPjaxContainer" data-confirm="确定删除此商品？(删除后的商品进入回收站)" class="jbolt_table_delbtn"><i class="fa fa-remove c-danger"></i></a>
                            #end



                            #end


                        </td>
                    </tr >
                    <tr style="display:none;background-color: #F2F2F2" id="summernote_demoHiddenTextContent_#(data.id)">
                        <td  colspan="16"  >
                            <div >
                                #if((MyUtil.get_commodity_option(data.id??)))
                                #for(sele:(MyUtil.get_commodity_option(data.id??)))
                                <div style="display: flex;flex-direction: row;margin-bottom: 10px;">
                                    <br>
                                    <br>
                                    <div class="col-5 offset-1 " style="width: 100%; text-align: left;margin-top: 20px" >
                                        商品编号:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#(sele.id??)
                                        <br>
                                        <br>

                                        商品规格:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#(sele.title??)
                                        <br>
                                        <br>

                                        原价(元):&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#(MyUtil.get_price_string(sele.price??))
                                        <br>
                                        <br>

                                        特价(元):&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#(MyUtil.get_price_string(sele.special_price??))
                                        <br>
                                        <br>
                                        特价库存:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#(sele.special_stock)
                                        <br>
                                        <br>
                                        特价折扣:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#(sele.discount)
                                        <br>
                                        <br>
                                        分销商积分:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#(sele.spreader_credit)
                                        <br>
                                        <br>
                                        平台抽成:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#(sele.platform_commission)
                                        <br>
                                        <br>
                                    </div>


                                    <div class=" text-left d-inline-block" style="width: 80%;  display: flex;  flex-direction: row;justify-content: flex-end;margin-top: 50px">
                                        参考图片:<img  src="#realImage(sele.thumb??,'/assets/img/uploadimg.png')  " data-src="#realImage(sele.thumb??,'/assets/img/uploadimg.png')" data-srcset="#realImage(sele.thumb??,'/assets/img/uploadimg.png')" style="width:150px;height: 150px;" >
                                    </div>
                                    <div style="display: flex;flex-direction: row;margin-top: 100px;margin-right: 20px">
                                        <a style="margin-right:10px; " tooltip data-title="编辑" data-jboltlayertrigger data-confirm href="/auth/mall/special_commodity/content_update_commodity/#(sele.id)"  data-noclose data-width="500" ><i class="fa fa-pencil c-primary"></i></a>
                                        <a style="margin-right:10px; " tooltip  title="删除"  href="/auth/mall/special_commodity/delete_option/#(sele.id)" data-handler="refreshPjaxContainer" data-confirm="确定删除此商品？(删除后的商品进入回收站)" class="jbolt_table_delbtn"><i class="fa fa-remove c-danger"></i></a>

                                    </div>

                                </div>
                                #end
                                #end
                                <div style="display: flex;flex-direction: row-reverse">
                                    <img src="assets/img/off.png" data-switchbtn  data-handler="$('#HiddenOption_#(data.id)').toggle()" data-value="新增" />
                                    新增
                                </div>

                                <div style="display:none" id="HiddenOption_#(data.id)">
                                    <form class="form"  id="optionFormImg_#(for.index)" action="/auth/mall/special_commodity/save_commodity_option" method="post" onsubmit="return false">
                                        #if(data.id??)
                                        <input type="hidden" name="option.commodity_id" value="#(data.id??)" />
                                        #end
                                        <div style="display: flex;flex-direction: row;"  >

                                            <div>
                                                <input type="hidden" id="mainImageInput_#(for.index)"  data-rule="required" data-tips="请上传商品主图" name="option.thumb"  />
                                            </div>
                                            <div >
                                                <label class="col-form-label text-right" >商品规格：</label>
                                                <input type="text"  autocomplete="off"  class="form-control"  name="option.title"  style="width: 200px;margin-right: 10px;"  maxlength="12">
                                            </div>
                                            <div>
                                                <label class="col-form-label text-right" >原价(元)：</label>
                                                <input type="money"   autocomplete="off"  class="form-control" data-rule="money" name="price" style="width: 200px;margin-right: 10px;" maxlength="12">
                                            </div>
                                            <div>
                                                <label class="col-form-label  text-right" >特价(元)：</label>
                                                <input type="money"   autocomplete="off"  class="form-control" data-rule="money" name="special_price" style="width: 200px;margin-right: 10px;" maxlength="12">
                                            </div>
                                            <div>
                                                <label class="col-form-label  text-right" >特价库存：</label>
                                                <input type="text"   autocomplete="off"  class="form-control" data-rule="number" name="option.special_stock" style="width: 200px;margin-right: 10px;" maxlength="12">
                                            </div>

                                            <div>
                                                <label class="col-form-label  text-right" >特价折扣：</label>
                                                <input type="text"   autocomplete="off"  class="form-control" data-rule="number" name="option.discount" style="width: 200px;margin-right: 10px;" maxlength="12">
                                            </div>
                                            <div>
                                                <label class="col-form-label  text-right" >分销商积分：</label>
                                                <input type="text"   autocomplete="off"  class="form-control" data-rule="number" name="option.spreader_credit" style="width: 200px;margin-right: 10px;" maxlength="12">
                                            </div>
                                            <div>
                                                <label class="col-form-label  text-right" >平台抽成：</label>
                                                <input type="text"   autocomplete="off"  class="form-control" data-rule="number" name="option.platform_commission" style="width: 200px;margin-right: 10px;" maxlength="12">
                                            </div>

                                        </div>
                                    <br><br>

                                    </form>
                                    <div class="form-group row">
                                        <label class="col-form-label col-2 col-sm-3 text-right">商品主图：</label>
                                        <div class="col-10 col-sm-9">
                                            <img id="image_#(for.index)" src="#" alt="" style="width: 150px;height: 150px">
                                            <input type="file" name="file_#(for.index)" onclick="change('#(for.index)')" id="file_#(for.index)" accept="image/*"  >
                                            <small  class="form-text text-muted text-ceter">建议尺寸640像素*640像素,大小不超200kb</small>
                                            <div class="form-group text-center" style="display: flex;flex-direction: row-reverse">

                                                <button  id="upload" onclick="imageload('#(for.index)')" class="btn btn-success" style="width:100px;"  ><i class="fa fa-check mr-2"></i>保存</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </td>
                    </tr>
                    #end
                    #end
                    </tbody>
                </table>
                #include("/_view/_admin/common/_page.html",pageEleId="commodity_page")
            </div>

        </div>
    </div>
</div>
#end
#define js()

<script type="text/javascript" src="/assets/js/jquery-min.js"></script>
<script src="https://unpkg.com/qiniu-js@2.5.4/dist/qiniu.min.js"></script>

<script type="text/javascript">


    /**
     * 商品管理 后台页面 JS
     */

    var select_commodity_form=$("#select_commodity_form1");
    /**
     * 按分类查询
     */
    function changeBackType(commodityTypeId){
        select_commodity_form.find("[name='commodityTypeId']").val(commodityTypeId);
        select_commodity_form.submit();
    }
    /**
     * 普通查询
     */
    function normalData(){
        select_commodity_form.find("[name='isDelete']").val(false);
        select_commodity_form.submit();
    }
    /**
     * 查回收站
     */
    function trashData(){
        select_commodity_form.find("[name='isDelete']").val(true);
        select_commodity_form.submit();
    }
    /**
     * 处理上下架切换后的事项
     */
    function onSaleChangeHandler(){
        //var onSale="#(onSale??)";
        //if(onSale!=""){
        refreshPjaxContainer();
        //	}

    }
    /**
     * 读取商品后台分类树
     */
    function readCommodityTypeTree(){
        var commodityTypeId=select_commodity_form.find("[name='commodityTypeId']").val();
        Ajax.get("/mall/type/commodity/get_filter_tree/"+commodityTypeId,function(data){
            var treeDatas=data.data;
            $("#commodity_Tree_commodity_mgr1").jstree({
                'core' : {
                    'data' :treeDatas,
                    'check_callback' : true
                },
                'plugins' : ["themes","wholerow"],
            })
                .on('changed.jstree', function (e, data) {
                    if(data&&data.node){
                        changeBackType(data.node.id);
                    }
                });
        });

    }

    $(function(){
        readCommodityTypeTree();
        var totalPage=$("#totalPage").val();
        var pageNumber=$("#pageNumber").val();
        initPage("commodity_page",totalPage,pageNumber,"select_commodity_form1");
    });

    //提交表单
    function OptionSubmitForm(formEle,callback){
        var form=getRealJqueryObject(formEle);
        if(isOk(form)){
            if(FormChecker.check(form)){
                var url=form.action;
                form.ajaxSubmit({
                    type:"post",
                    url:url,
                    success:function(ret){
                        if(ret.state=="ok"){
                            if(callback){
                                LayerMsgBox.success(ret.msg,500,callback);
                                refreshPjaxContainer();
                            }else{
                                LayerMsgBox.success(ret.msg,500);
                                refreshPjaxContainer();
                            }

                        }else{
                            LayerMsgBox.alert(ret.msg,2);
                        }
                    }
                });
            }
        }

        return false;

    }

    function TestOrderreset() {
        document.getElementById("keyword1").value="";
        document.getElementById("on_type1").value="";
        document.getElementById("sale1").value="";
        document.getElementById("Status1").value="";
        document.getElementById("on_commodity_type1").value="";
    }


    function change(c) {
        $("#file_"+c).on("change", function ()  {
            var inputBox = document.getElementById("file_"+c);
            var img = document.getElementById("image_"+c);
            var reader = new FileReader();
            reader.readAsDataURL(inputBox.files[0]);//发起异步请求
            reader.onload = function () {
                //读取完成后，将结果赋值给img的src
                img.src = this.result
            }
        })
    }


    function imageload(i) {

        var obj = $("#file_"+i);

        var fileName = obj.val();//上传的本地文件绝对路径

        var suffix = fileName.substring(fileName.lastIndexOf("."),fileName.length);//后缀名
        var file = obj.get(0).files[0];
        //上传的文件
        var size = file.size > 1024 ? file.size / 1024 > 1024 ? file.size / (1024 * 1024) > 1024 ? (file.size / (1024 * 1024 * 1024)).toFixed(2) + 'GB' : (file.size
            / (1024 * 1024)).toFixed(2) + 'MB' : (file.size
            / 1024).toFixed(2) + 'KB' : (file.size).toFixed(2) + 'B';		   //文件上传大小
        //七牛云上传
        $.ajax({
            type:'post',
            url: "/auth/mall/Qn/QiniuUpToken",
            data:{"suffix":suffix},
            dataType:'json',
            success: function(result){

                if(result.success == 1){

                    var observer = {
                        //设置上传过程的监听函数

                        next(result){                        //上传中(result参数带有total字段的 object，包含loaded、total、percent三个属性)
                            Math.floor(result.total.percent);//查看进度[loaded:已上传大小(字节);total:本次上传总大小;percent:当前上传进度(0-100)]
                        },
                        error(err){
                            alert(2);//失败后
                            alert(err.message);
                        },
                        complete(res){

                            //成功后
                            // ?imageView2/2/h/100：展示缩略图，不加显示原图
                            // ?vframe/jpg/offset/0/w/480/h/360：用于获取视频截图的后缀，0：秒，w：宽，h：高


                            // $("#file").attr("src","http://"+result.domain+"/"+result.imgUrl+"?i");
                            $("#image").attr("src","http://"+result.domain+"/"+result.imgUrl+"?i");
                            $("#mainImageInput_"+i).val("http://"+result.domain+"/"+result.imgUrl+"?i");
                            var xx="optionFormImg_"+i;
                            OptionSubmitForm(xx);
                        }
                    };
                    var putExtra = {
                        fname: "",                          //原文件名
                        params: {},                         //用来放置自定义变量
                        mimeType: null                      //限制上传文件类型
                    };
                    var config = {
                        region:qiniu.region.z2,             //存储区域(z0:代表华东;z2:代表华南,不写默认自动识别)
                        concurrentRequestLimit:3            //分片上传的并发请求量
                    };
                    var observable = qiniu.upload(file,result.imgUrl,result.token,putExtra,config);
                    var subscription = observable.subscribe(observer);          // 上传开始
                    // 取消上传
                    // subscription.unsubscribe();



                }else{

                    alert(3);//失败后
                    alert(result.message);                  //获取凭证失败
                }



            },error:function(){                             //服务器响应失败处理函数
                alert("服务器繁忙");
            }
        });

    }



</script>

#end

